<template>
    <div style="margin: 10px 20px;">
        <div style="margin-bottom: 30px;">
            <el-page-header @back="goBack" :content="scoreInfo[0].paperName">
            </el-page-header>
        </div>
        <div>
            <div v-for="(score, index) in scoreInfo" :key="index"
                style="padding: 10px 0;border-bottom: 1px solid #f1f1f1;margin-bottom: 20px;font-size: 16px;">
                <el-row>
                    <div>
                        <span style="margin-right: 10px;font-size: 12px;color: #606266;">第{{ index + 1 }}题</span>
                        <span class="practice-type" v-if="score.practiceType === 1">单选题</span>
                        <span class="practice-type" v-else-if="score.practiceType === 2">多选题</span>
                        <span class="practice-type" v-else-if="score.practiceType === 3">填空题</span>
                        <span class="practice-type" v-else>判断题</span>
                        <span class="practice-type" style="margin-left:  4px;">{{ score.projectName }}</span>
                    </div>
                    <div v-html="score.askItem"></div>
                </el-row>
                <div v-if="score.practiceType === 1 || score.practiceType === 2">
                    <div>
                        <div v-for="(question, index) in parseAskItem(score)" style="margin-right: 20px;">
                            <div style="margin-bottom: 8px;font-size: 14px;color: #606266;">
                                <span style="margin-right: 8px;">{{ question.type }}.</span>
                                <span>{{ question.value }}</span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 20px;font-size: 14px;color: #606266;">
                        <span style="margin-right: 20px;">正确答案：{{ parseAnswer(score.rightAnswer) }}</span>
                        <span style="margin-right: 20px;">用户作答：{{ parseAnswer(score.answer) }}</span>
                        <span>得分：{{ score.postScore }}</span>
                    </div>
                    <div style="margin-top: 20px;font-size: 14px;color: rgb(43, 121, 203);">
                        <div style="margin: 20px 0;">题目解析：</div>
                        <div :key="index" v-for="(question, index) in parseAskAnswer(score)"
                            style="margin-right: 20px;">
                            <div style="margin-bottom: 8px;font-size: 14px;color:rgb(43, 121, 203);">
                                <span style="margin-right: 8px;">{{ question.type }}.</span>
                                <span>{{ question.value }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="score.practiceType === 4">
                    <div>
                        <div v-for="(question, index) in parseAskItem(score)" style="margin-right: 20px;">
                            <div style="margin-bottom: 8px;font-size: 14px;color: #606266;">
                                <span style="margin-right: 8px;">{{ question.type }}.</span>
                                <span>{{ question.value }}</span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 20px;font-size: 14px;color: #606266;">
                        <span style="margin-right: 20px;">正确答案：{{ parseAnswer(score.rightAnswer) }}</span>
                        <span style="margin-right: 20px;">用户作答：{{ parseAnswer(score.answer) }}</span>
                        <span>得分：{{ score.postScore }}</span>
                    </div>
                </div>
                <div v-else>
                    <div style="margin: 20px 0;font-size: 14px;color: #606266;">
                        <span style="margin-right: 20px;">正确答案：{{ parseAnswer(score.rightAnswer) }}</span>
                        <span style="margin-right: 20px;">用户作答：{{ parseAnswer(score.answer) }}</span>
                        <span>得分：{{ score.postScore }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            scoreInfo: []
        }
    },
    created() {
        this.loadInfo();
    },
    methods: {
        parseAnswer(answer) {
            const list = JSON.parse(answer);
            if (typeof list !== 'string') {
                return list.join('、');
            }
            return list;
        },
        parseAskItem(score) {
            return JSON.parse(score.question);
        },
        parseAskAnswer(score) {
            return JSON.parse(score.askAnswer);
        },
        goBack() {
            this.$router.go(-1);
        },
        loadInfo() {
            const scoreInfoJson = sessionStorage.getItem('scoreInfo');
            this.scoreInfo = JSON.parse(scoreInfoJson);

        },
    }
}

</script>
<style lang="scss" scoped>
.practice-type {
    margin-right: 10px;
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    background-color: rgb(235, 237, 245);
    color: rgb(43, 121, 203);
    font-size: 12px;
}
</style>